<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas 基础｛绘制无差动画｝{使用计时器}</title>
<style type="text/css">
#canvas{border: 1px solid #ccc;}
.loading{display:none;}
</style>
</head>
<body>
<p>摁下上下左右按键，控制人物行走</p>
   <canvas id="canvas" width="600" height="400">
      <p>Your browserdoes not support the canvas element.</p>  
   </canvas>
   <div class="loading">
      <img src="soldier.jpg" id="charactor">
   </div>
</body>
<script type="text/javascript">
// drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY, destWidth, destHeight){图片，裁剪位置X,裁剪位置Y，裁剪位置宽,裁剪位置高，图片定位X，图片定位Y，图片宽度，图片高度}

/*
原理:
1.通过截取一张大图的不同部分来展示不同的人物状态
2.同步图片不同定位，控制人物移动
*/

var pic_att={//位置速度配置
   x:100,//位置x
   y:20,//位置y
   speed:5//速度
}

var game={
   x:0,//裁剪定位
   context2D:document.getElementById("canvas").getContext("2d"),
   lock:false,//上个锁，判断人物是否转向，用于反转画布
   imgs:{//图片类
      cha:document.getElementById("charactor")
   },
   dir:{ left:false,right:false,top:false,down:false},//四个方向的判断
   init:function(){
      var obj=this;
      //绘制canvas
      var canvas =document.getElementById("canvas");
      var context2D =canvas.getContext("2d");
      // 图片加载完成后，绘制图片
      context2D.drawImage(obj.imgs.cha,0,5,80,45,pic_att.x,pic_att.y,80,45);

      // 侦听键盘事件
      addEventListener("keydown",function(e){
         // console.log(e.keyCode);
         obj.key_down(e.keyCode);
      }, false);

      addEventListener("keyup",function(e){//重做dir类中所有状态
         for(var i in obj.dir){
            obj.dir[i]=false;
         }
      }, false);

      obj.timer();
   },
   //移动事件
   move:function(lock){
      var obj=this;
      obj.context2D.clearRect(0,0,600,400);//清除画布
      obj.x+=80;//人物行走的位置，距离
      if(obj.x>=640){obj.x=0;}
      // 图片反转｛NND，原理还没懂｝
      if(lock){
         // 水平“翻转”画布
         obj.context2D.translate(600, 0);
         obj.context2D.scale(-1, 1);
          // 下面画的图片是水平翻转的
         obj.context2D.drawImage(obj.imgs.cha,obj.x,5,80,45,600-80-pic_att.x,pic_att.y,80,45);
         // 画布恢复正常
         obj.context2D.translate(600, 0);
         obj.context2D.scale(-1, 1);
      }else{
         obj.context2D.drawImage(obj.imgs.cha,obj.x,5,80,45,pic_att.x,pic_att.y,80,45);
      }
   },
   //键盘事件
   // keycode:37(左),38(上),39(右),40(下),
   key_down:function(keycode){
      var obj=this;
      if(keycode==37){
         obj.dir.left=true;
      }
      if(keycode==39){
         obj.dir.right=true;
      }
      if(keycode==38){
         obj.dir.top=true;
      }
      if(keycode==40){
         obj.dir.down=true;
      }
   },
   //计时器，随时随地判断方向键
   timer:function(){
      var obj=this;
      setInterval(function(){
         if(obj.dir.left){
            pic_att.x=pic_att.x-pic_att.speed;
            obj.lock=false;
            obj.move(obj.lock);
         }else if(obj.dir.right){
            pic_att.x=pic_att.x+pic_att.speed;
            obj.lock=true;
            obj.move(obj.lock);
         }else if(obj.dir.top){
            pic_att.y=pic_att.y-pic_att.speed;
            obj.move(obj.lock);
         }else if(obj.dir.down){
            pic_att.y=pic_att.y+pic_att.speed;
            obj.move(obj.lock);
         }
      },20)
   }
}
window.onload=function(){
   game.init();
}
</script>
</html>